<template>
	<view>
		<my-search></my-search>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<!-- v-bind ： 绑定之后变为js  再写字符串时需要加引号 -->
				<navigator class="swiper-item" :url="`/subpkg/goods_detail/goods_detail?goods_id=${item.goods_id}`">
					<image :src="item.image_src" mode=""></image>
				</navigator>
			</swiper-item>
			
		</swiper>
		<!--导航区  -->
		<view class="nav-list">
			<!-- 只给分类绑定跳转事件 switchTab  如果item.name ==='分类' 进行跳转 -->
			<view class="nav-item" v-for="(item,index) in navList" :key="index" @click="goCate(item)">
				<image :src="item.image_src" mode=""></image>
			</view>
		</view>
		<!-- 楼层 -->
		<!-- 楼层标题 -->
		<view class="floor-list">
			<view class="floor-item" v-for="(item,index) in floorList" :key="index">
				<image class="floor-item-title" :src="item.floor_title.image_src"></image> 
				<!-- 楼层图片  属于两列结构-->
				<view class="floor-img-box">
					<navigator class="left-img-box" :url="item.product_list[0].url">
						<!-- 左边盒子放的是大图  floorlist item[0]  1 直接渲染即可-->
						<image :src="item.product_list[0].image_src" mode=""></image>
					</navigator>
					<view class="right-img-box">
						<!-- 左边盒子放的是大图  floorlist item[非0] 4  v-for遍历渲染一下-->
						<!-- 第一张图片渲染重复， left当中渲染第一张 在right当中渲染44
						 第一张不显示   v-if 条件 下标为0的不显示-->
						<navigator class="right-img-item" v-for="(item2,index2) in item.product_list" :key="index2" v-if="index2 !== 0" :url="item2.url">
							<image class="right-item-img" :src="item2.image_src" mode=""></image>
						</navigator>
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import {swiperdata,catitemsdata,floordata} from '@/api/home_request.js';
	export default {
		data() {
			return {
				// 轮播图数据的初始值
				swiperList:[],
				// 导航区的数据的初始值
				navList:[],
				// 楼层数据
				floorList:[]
			};
		},
		onLoad() {
			this.getSwiperData();
			// this.test();
			this.getCatitemsData();
			this.getFloorData();
			
			
		},
		methods:{
			// 发送网络数据请求
			async getSwiperData(){
				const {data:res} = await swiperdata();
				// console.log(res);
				// res 相当于result.data
				// console.log(result.data);
				// 在data当中设计初始值 在template当中进行渲染
				// 渲染res当中的message
				if(res.meta.status !== 200) return uni.$showMsg();
				this.swiperList = res.message;
				
			},
			
			// 发送网络数据请求 请求导航区的数据
			async getCatitemsData(){
				// 1.发送请求
				const {data:res} = await catitemsdata();
				// console.log(res);
				// 2.请求成功
				
				// 3.请求失败 reture 并告诉用户数据请求失败
				if(res.meta.status !== 200) return uni.$showMsg();
				// 4.成功给data当中的初始值赋值
				this.navList = res.message;
			},
			// 楼层的数据
			async getFloorData(){
				const {data:res} = await floordata();
				console.log(res);
				// 
				if(res.meta.status !==200) return uni.$showMsg();
				// 给楼层数据当中的product_list 里头的每一项  url 
				res.message.forEach(floor=>{
					floor.product_list.forEach(prod=>{
						prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1];
					})
				})
				this.floorList = res.message;
			},
			test(){
				console.log('test');
				let obj = {
					name:'tom',
					age:18
				}
				console.log(obj);
				let {name:hanhan,age:age} = obj;
				console.log(hanhan,age);
				/* let name = obj.name;
				let age = obj.age; */
			},
			// 点击分类进行跳转
			goCate(item){
				if(item.name === '分类'){
					uni.switchTab({
						url:'/pages/cate/cate'
					})
				}
			}
		}
	}
	
	
	/* 
	一般不要在主分支操作
	 自己创建分支
	 创建home分支
	 
	 结论：做网络数据请求 uni.request   包封装了uni.request 拦截器的功能
	 @escook/request-miniprogram
	 
	 package.json
	 下载包之前需要进行初始化包管理文件  npm init
	 
	 下载包 
	 npm install @escook/request-miniprogram
	 
	 
	 
	 要进行网络数据请求 进行二次封装
	 
	 接口分类
	 
	 在home页面引入 对应的接口
	 发送网络数据请求
	 uniapp写小程序 生命周期钩子同小程序页面的钩子一致
	 
	 
	 需求：
	 1. 完成轮播图，点击轮播图跳转到对应的商品详情页面   
	 
	 首页 ------goods_id----  商品详情  传值
	 
	 创建商品详情页面   放到分包当中    分包文件夹（subpkg）---goods_detail
	 
	 小程序当中的分包如何配置
	 pages.json   subPackages:[{root pages}]
	 
	 2.完成导航区   有get 请求导航区的数据  在接口分类的api封装导航区的数据请求
	 获取到封装好的接口
	 做网络数据请求
	 在template进行渲染  创建初始值
	 
	 3./api/public/v1/home/floordata  时尚女装 楼层
	 get请求  请求会数据   接口分类
	 获取到封装好的接口
	 做网络数据请求
	 在template进行渲染  创建初始值
	 
	 渲染  先去渲染楼层的标题信息
	 
	 点击楼层中的图片 跳转到商品列表当中
	 没有商品列表页面  
	 
	 
	 创建商品列表  主包还是分包   分包当中创建goods_list页面
	 
	 点击进入商品列表后需要有关键字传递过去 从服务器请求回来相关的数据
	 
	 给楼层当中的每个图片 navigator组件
	 url /subpkg/goods_list/goods_list + query参数
	 /pages/goods_list?query=春季  字符串   split('?')[1]
	 思路： 要不navigateTo 编程式导航    
	 navigator组件 声明式导航
	 
	 左边  navigator  url /subpkg/goods_list/goods_list + query参数
	 右边  image 遍历得到  navigator url /subpkg/goods_list/goods_list + 
	 
	 product_list 每一项 .url    ---.navigator_url.split('?').[1]
	 
	 3. 点击分类跳转到分类页面
	 拓展：在分包当中创建页面 秒杀拍 超市购 母婴品
	 点击对应的按钮跳转过去
	 navigateTo
	 分支语句使用if elseif elseif else
	 switch
	 
	 
	 
	 
	 */
</script>

<style lang="scss">
swiper{
	height: 340rpx;
	.swiper-item,image{
		width: 100%;
		height: 100%;
	}
}
.nav-list{
	display: flex;
	justify-content: space-around;
	margin: 30rpx 0;
	.nav-item{
		width: 130rpx;
		height: 140rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
}
.floor-list{
	.floor-item{
		margin-left: 10rpx;
		margin-bottom:10rpx;
		.floor-item-title{
			width:100% ;
			height: 60rpx;
		}
		.floor-img-box{
			display: flex;
			height: 400rpx;
			.left-img-box{
				width: 33%;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.right-img-box{
				width: 66%;
				display: flex;
				flex-wrap: wrap;
				.right-img-item{
					width: 48%;
					.right-item-img{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		
	}
}

/* 
 原型图  参考 iPhone6-7-8  分辨率 750 *1334   2 设备独立像素 375*667   750*1334   rpx px 2 
 
 */
</style>
